{% extends 'store_admin/inventory/base_items.html' %}
{% load i18n %}
{% load sell_tags %}
{% load for_sale_tags %}

{% block m_items %}current_sub_menu{% endblock %}

{% block title_sub_menu %}{% trans "Item detail" %}: {{ item.title }}{% endblock %}

{% block jquery-file-upload %}

	<!-- Bootstrap CSS Toolkit styles -->
	
	<!-- <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"> -->
	<link rel="stylesheet" href="{{ MEDIA_URL }}css/bootstrap.min.css">
	
	<!-- Bootstrap styles for responsive website layout, supporting different screen sizes -->
	<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css">
	
	<!-- Bootstrap CSS fixes for IE6 -->
	
	<!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-ie6.min.css"><![endif]-->
	<!-- Bootstrap Image Gallery styles -->
	<!-- 
	<link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/css/bootstrap-image-gallery.min.css">
	 -->
	
	<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
	<link rel="stylesheet" href="{{ MEDIA_URL }}css/jquery.fileupload-ui.css">
	
	<!-- Shim to make HTML5 elements usable in older Internet Explorer versions -->
	<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

	<script src="http://test.studio.devsar.com:8015/public/js/bootstrap.js"></script>
	
	<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --> 
	<script src="{{ MEDIA_URL }}js/upload/vendor/jquery.ui.widget.js"></script> 
	
	<!-- The Templates plugin is included to render the upload/download listings --> 
	<script src="http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"></script> 
 
	<!-- The Load Image plugin is included for the preview images and image resizing functionality --> 
	<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script> 
	
	<!-- The Canvas to Blob plugin is included for image resizing functionality --> 
	<script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script> 
	
	<!-- Bootstrap JS and Bootstrap Image Gallery are not required, but included for the demo -->
	<script src="http://blueimp.github.com/Bootstrap-Image-Gallery/js/bootstrap-image-gallery.min.js"></script>
	
	<!-- The Iframe Transport is required for browsers without support for XHR file uploads --> 
	<script src="{{ MEDIA_URL }}js/upload/jquery.iframe-transport.js"></script> 
	
	<!-- The basic File Upload plugin --> 
	<script src="{{ MEDIA_URL }}js/upload/jquery.fileupload.js"></script> 
	
	<!-- The File Upload image processing plugin --> 
	<script src="{{ MEDIA_URL }}js/upload/jquery.fileupload-ip.js"></script> 
	
	<!-- The File Upload user interface plugin --> 
	<script src="{{ MEDIA_URL }}js/upload/jquery.fileupload-ui.js"></script> 
	
	<!-- The localization script --> 
	<script src="{{ MEDIA_URL }}js/upload/locale.js"></script>
	
	<!-- The main application script --> 
	<script src="{{ MEDIA_URL }}js/upload/main.js"></script> 
	
	{% block dont_use_validate %}<!-- remove validation javascript -->{% endblock %}
	
	<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ --> 
	<!--[if gte IE 8]><script src="{{ MEDIA_URL }}js/upload/cors/jquery.xdr-transport.js"></script><![endif]-->
	
	<style type="text/css">
		a.btn{
			color: #fff;
			position: relative;
			top: 1px;
		}
	</style>
	
{% endblock %}

{% block toolbar %}
	<a href="{% url item_edit item.id %}"><img src="{{ MEDIA_URL }}img/edit.png" class="icon">{% trans "Edit Item" %}</a> |   
	<a href="{% url item_delete item.id %}"><img src="{{ MEDIA_URL }}img/remove.png" class="icon">{% trans "Remove Item" %}</a> |
	<a href="{% url inventory_items_import %}"><img src="{{ MEDIA_URL }}img/import.png" class="icon">{% trans "Import" %}</a>
{% endblock %}


{% block main %}
	<div class="grid_16 box">	
		<div class="grid_8 margin_h">
			<h3>{% trans "Item" %}: {{ item.title }} </h3>
			<p class="text_justify"><b>{% trans "Description" %}:</b> {{ item.description|striptags|linebreaks }} </p>
			<p><b>{% trans "Category" %}:</b> {{ item.category.name }} </p>
			<p><b>{% trans "SubCategory" %}</b>: {{ item.subcategory.name }} </p>
			<p><b>{% trans "Qty" %}:</b> {{ item.qty  }}</p>
			<p><b>{% trans "Weight" %}:</b> {{ item.weight  }}</p>
			<p><b>{% trans "Price" %}:</b> {{ item.price|money_format:shop  }}</p>
		</div>
		
        {% comment %}
			<div class="grid_6 margin_h padding_h">
				<h3>{% trans "Item Images" %}</h3>
		            <div id="images">
		            {% for img in item.imageitem_set.all %}         
		                    <div class="image">
		                            <img src="{{ img.image.url_100x100 }}" height="100"/>
		                            <div><a href="{% url del_item_image item.id img.id %}">{% trans "Delete" %}</a></div>
		                            {% if img.primary_picture %}
		                            <div>Primary Picture</div>
		                            {% else %}
		                            <div><a href="{% url set_forsale_primary_picture item.id img.id %}">{% trans "Set as Primary" %}</a></div>
		                            {% endif %}
		                    </div>
		            {% endfor %}
		            </div>
		            <div class="clear"></div>
		            <br/>
		            <br/>
		            <div class="grid_5">
		                    <form action="{% url add_item_image item.id %}" method="POST" name="form_image" enctype="multipart/form-data">
		                            {{ image_form.as_p }}
		                            <button type="submit" class="small awesome">{% trans "Add Image" %}</button>
		                    </form>
		            </div>
					<div class="clear"></div>
			</div>
		{% endcomment %}
		
		<br/>
		<br/>
		<div class="grid_15 margin_h" style="">
		</div>
		<div class="clear"></div>
	</div>
  	
  	
	<h3>{% trans "Item Images" %}</h3>
	
	<!-- The file upload form used as target for the file upload widget -->
    <form id="fileupload" action="{% url add_item_image item.id %}" method="POST" enctype="multipart/form-data" class="well">
        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
        <div class="row fileupload-buttonbar">
            <input type="checkbox" class="toggle" style="position: relative; top: 8px; right: -101px;">
            <div class="span7">
                <!-- The fileinput-button span is used to style the file input field as button -->
                <span class="btn btn-success fileinput-button">
                    <span><i class="icon-plus icon-white"></i> {% trans "Add Images" %}...</span>
                    <input type="file" name="files" multiple>
                </span>
                <button type="submit" class="btn btn-info start">
                    <i class="icon-upload icon-white"></i> {% trans "Start Upload" %}
                </button>
                <button type="reset" class="btn btn-warning cancel">
                    <i class="icon-ban-circle icon-white"></i> {% trans "Cancel Upload" %}
                </button>
                <button type="button" class="btn btn-danger delete">
                    <i class="icon-trash icon-white"></i> {% trans "Delete" %}
                </button>
            </div>
            <div class="span4">
                <!-- The global progress bar -->
                <div class="progress progress-success progress-striped active fade">
                    <div class="bar" style="width:0%;"></div>
                </div>
            </div>
        </div>
        <!-- The loading indicator is shown during image processing -->
        <div class="fileupload-loading"></div>
    
        <!-- The table listing the files available for upload/download -->
        <table class="table table-striped" style="box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;">
        	<tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery">
        		<!-- files -->        	
        	</tbody>
        </table>
    </form>		        
{% comment %}    
	<!-- modal-gallery is the modal dialog used for the image gallery -->
	<div id="modal-gallery" class="modal modal-gallery hide fade fullscreen">
	    <div class="modal-header">
	        <a class="close" data-dismiss="modal">&times;</a>
	        <h3 class="modal-title"></h3>
	    </div>
	    <div class="modal-body"><div class="modal-image"></div></div>
	    <div class="modal-footer">
	        <a class="btn btn-primary modal-next">{% trans "Next" %} <i class="icon-arrow-right icon-white"></i></a>
	        <a class="btn btn-info modal-prev"><i class="icon-arrow-left icon-white"></i> {% trans "Previous" %}</a>
	        <a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000"><i class="icon-play icon-white"></i> {% trans "Slideshow" %}</a>
	        <a class="btn modal-download" target="_blank"><i class="icon-download"></i> {% trans "Download" %}</a>
	    </div>
	</div>
{% endcomment %}
  	    {% upload_js %}
    	
{% endblock %}
